<template>
    <div class="app-container">
      <el-tabs v-model="activeName" type="card"  @tab-click="handleClick"  >
        <el-tab-pane label="图表" name="first">
          <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="68px">
        <el-form-item label="园所性质" prop="type">
          <el-select v-model="queryParams.type" placeholder="请选择园所性质" clearable size="small">
            <el-option v-for="dict in schoolTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label="地区类型" prop="nature">
          <el-select v-model="queryParams.nature" placeholder="请选择地区类型" clearable size="small">
            <el-option v-for="dict in schoolNatureOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
          <div class="charts"  >
            <div  ref="regionCharts" class="regionCharts"></div>
            <div  ref="schoolCharts" class="schoolCharts"></div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="列表" name="second">
          <el-form :model="querys" ref="query" :inline="true"  label-width="68px">
        <el-form-item label="园所性质" prop="type">
          <el-select v-model="querys.type" placeholder="请选择园所性质" clearable size="small">
            <el-option v-for="dict in schoolTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label="地区类型" prop="nature">
          <el-select v-model="querys.nature" placeholder="请选择地区类型" clearable size="small">
            <el-option v-for="dict in schoolNatureOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQueryLb">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQueryLb">重置</el-button>
        </el-form-item>
      </el-form>
          <el-table v-loading="loading" :data="analysislb"  style="height: 100%;width: 100%;">
            <el-table-column type="index" align="center" label="序号" :index="customeIndex" width="80"></el-table-column>
              <el-table-column  align="center" label="园所名称"  prop="schoolName"></el-table-column>
              <el-table-column  align="center" label="园所性质" prop="schoolType" :formatter="schoolTypeFormat" ></el-table-column>
              <el-table-column  align="center" label="地区类型"  prop="nature"  :formatter="schoolNatureFormat"></el-table-column>
              <el-table-column  align="center" label="在园人数"  prop="attendance0"></el-table-column>
              <el-table-column  align="center" label="大型器械"  prop="attendancePro4"></el-table-column>
              <el-table-column  align="center" label="中小型器械" prop="attendance3"></el-table-column>
              <el-table-column  align="center" label="手持器械"  prop="attendancePro3"></el-table-column>
           </el-table>
           <div style="height: 50px;">
            <pagination v-show="querystotal>0" :total="querystotal" :page.sync="querys.pageNum" :limit.sync="querys.pageSize"
                   @pagination="getlbList" />
          </div>

        </el-tab-pane>
      </el-tabs>
    </div>
  </template>

  <script>
   import { analysisList,analysisExport } from "@/api/qu/qyyerygk";
    export default {
      name: "hwqjsstj",
      data() {
        return {
          // 查询参数
          queryParams: {
            nature:'',
            type:'',
          },
          // 查询参数
          querys: {
            pageNum: 1,
            pageSize: 10,
            nature:'',
            type:'',
          },
          querystotal:0,
          loading:false,
          typeOptions:[],
          analysislb:[],
          schoolNatureOptions:[],
          schoolTypeOptions:[],
          regionCharts:null,
          regionList:[
            {name:'大型器械',value:200},
            {name:'中小型器械',value:150},
            {name:'手持器械',value:250},
        ],
          schoolCharts:null,
          schoolData:[
            {name:'园1',big:20,zx:50,hand:60},
            {name:'园2',big:20,zx:50,hand:60},
            {name:'园3',big:20,zx:50,hand:60},
          ],
          activeName: 'first',
        };
      },
      created() {
         this.getDicts("park_type").then(response => {
          this.schoolTypeOptions = response.data;
        });
         this.getDicts("school_nature").then(response => {
          this.schoolNatureOptions = response.data;
        });
        this.getList();
        this.getlbList();
      },
      mounted(){
        this.regionCharts = this.$echarts.init(this.$refs.regionCharts);
        this.schoolCharts = this.$echarts.init(this.$refs.schoolCharts);
        this.regionChartsFn();
        this.schoolChartsFn();
      },
      methods: {
       async getList(){
            try {
              const obj={
                nature:this.queryParams.nature,
                schoolType:this.queryParams.type,
              };
            //  console.log(data);
            // this.chartsFun()
            } catch (error) {
              console.log(error);
            }
        },
       async getlbList(){
        this.loading=true;
          try {
              const obj={
                nature:this.querys.nature,
                schoolType:this.querys.type,
                pageNum: this.querys.pageNum,
                pageSize: this.querys.pageSize,
              };
             const data =  await analysisList(obj);
             this.analysislb=data.rows;
             this.querystotal=data.total;
             this.loading=false;
            } catch (error) {
              console.log(error);
            }
        },
           /** 搜索按钮操作 */
        handleQuery() {
          this.getList();
        },
         /** 重置按钮操作 */
         resetQuery() {
          this.resetForm("queryForm");
          this.handleQuery();
        },
         /** 搜索按钮操作 */
         handleQueryLb() {
          this.querys.pageNum = 1;
          this.getlbList();
        },
         /** 重置按钮操作 */
         resetQueryLb() {
          this.resetForm("query");
          this.handleQueryLb();
        },
        handleClick(tab, event) {
          // console.log(tab.label);
          if(tab.label=='图表'){
            this.getList();
            this.$nextTick(()=>{
            this.regionCharts.resize();
           })
          }else{
            this.querys.pageNum = 1;
            this.querys.pageSize = 10;
            this.getlbList();
          }
        },
         // 园所性质字典翻译
    schoolTypeFormat(row, column) {
      return this.selectDictLabel(this.schoolTypeOptions, row.schoolType);
    },
    //地区类型字典翻译
    schoolNatureFormat(row, column) {
      return this.selectDictLabel(this.schoolNatureOptions, row.nature);
    },
              // 序号
       customeIndex(index){
         return index+1+(this.querys.pageNum-1)*this.querys.pageSize
      },
        regionChartsFn(){
          const  option = {
             title: {
               text: '全区户外区角材料统计',
              //  subtext: '纯属虚构',
               left: 'left'
             },
             tooltip: {
               trigger: 'item',
          //      formatter: function (params) {
          //       // console.log(params);
          //      return params.name+':'+params.value+'%';
          //    },
             },
             legend: {
               type: 'scroll',
               orient: 'vertical',
               right: '20%',
               top: 20,
               bottom: 20,

             },
             grid: {
              top:5,
             left: '3%',
             right: '4%',
             bottom: '3%',
             containLabel: true
           },
             series: [
               {
                 name: '',
                 type: 'pie',
                 radius: '60%',
                 center: ['40%', '50%'],
                 data:this.regionList,
                 emphasis: {
                   itemStyle: {
                     shadowBlur: 10,
                     shadowOffsetX: 0,
                     shadowColor: 'rgba(0, 0, 0, 0.5)'
                   }
                 }
               }
               ]
            };
            this.regionCharts.setOption(option);
            window.addEventListener("resize", this.monitorResize);
        },
        schoolChartsFn(){
          const option = {
         // backgroud:'#333',
         title: {
           text: '各园户外区角材料统计情况',
          //  subtext: '纯属虚构',
           left: 'left'
         },
         tooltip: {
              trigger: 'axis',
              axisPointer: {
              type: 'shadow'
              }
          },
          dataZoom:{
             bottom:0,
             show:8/this.schoolData.length<1,
             // show:true,
             type:'slider',
             zoomLock:true,
             brushSelect:false,
             height:8,
             // backgroundColor:'#000000',
             handleSize:'0',
             // moveHandleSize:1,
             // moveHandleStyle:{
             //   borderType:'dotted'
             // },
             sow:true,
             xAxisIndex:[0],
             start:0,
             end:8/this.schoolData.length*100
           },
          legend: {
            selectedMode: 'single',
            top:0,
              left:'right',
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: [
              {
              type: 'category',
              axisLabel: {//x轴文字的配置
               show: true,
               rotate:0,
               interval: 0,//使x轴文字显示全
              },
              data: this.schoolData.map(item=>item.name)
              }
          ],
          yAxis: [
              {
              type: 'value'
              }
          ],
          color:['#5ab1ef','#2ec7c9',],
          series: [
              {
                  name: '大型器械',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'45%',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.schoolData.map(item=>item.big),
              },
              {
                  name: '中小型器械',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'45%',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.schoolData.map(item=>item.zx),
              },
              {
                  name: '手持器械',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'45%',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.schoolData.map(item=>item.hand),
              },

          ]
          }
            // 使用刚指定的配置项和数据显示图表
            this.schoolCharts.setOption(option,true);
            window.addEventListener("resize", this.monitorResize);
      },
         //地图监听窗口缩放事件
         monitorResize(){
          this.regionCharts.resize();
          this.schoolCharts.resize();
        },
      }
    };
  </script>
  <style lang="scss" scoped>
        .charts{
            display: flex;
            justify-content: space-between;
            margin-top: 50px;
            width:100%;
            height:600px;
            // border: 1px red solid;
            .regionCharts{
                width:40%;
                height: 100%;
                margin-bottom: 50px;
            }
            .schoolCharts{
                width:55%;
                height: 100%;
                margin-bottom: 50px;
            }
        }
  </style>
